<template>

	<form @submit="formSubmit">
		
		<view class="welcome_box dpflxc">
			
			<text class="hello">Hello</text>
			<text class="wel">欢迎登录贝贝熊门店管理平台</text>
			<view class="inputBox dpflxr">
				<view class="icon">
					<image src="../../static/images/icon_sjh.png"></image>
				</view>
				<input type="text" value="" placeholder="请输入手机号" name="mobile"
					placeholder-style="font-size:28rpx;color:#999;"></input>
			</view>
			<view class="inputBox dpflxr">
				<view class="icon">
					<image src="../../static/images/icon_mm.png"></image>
				</view>
				<input type="password" value="" placeholder="请输入密码" name="password"
					placeholder-style="font-size:28rpx;color:#999;"></input>
			</view>
	
			<button type="submit" form-type="submit" class="btn_box5" style="margin-top: 70rpx;">登录</button>
			<!-- <navigator url="/pages/index/index" open-type="switchTab" class="btn_box5">
		    <text>登录</text>
		</navigator> -->
		<view class="ysBox dpflxr">
			<radio color="#F9600D" style="transform:scale(0.7)" @click="radioChange()"></radio>
			<view class="line">
				<navigator :url="'../web/webview?url=https://www.baidu.com/'" class="path" hover-class="navigator-hover">《服务协议》</navigator>和<navigator :url="'../web/webview?url=https://www.baidu.com/'"
				 class="path" hover-class="navigator-hover">《隐私政策》</navigator>
			</view>
		
		</view>
			<text class="note">相关登录账号由平台分配</text>
		</view>
		<view>
		       <lyg-popup @popupState="popupState" title="服务协议" protocolPath='../web/webview?url=https://www.baidu.com/'
		         policyPath='../web/webview?url=https://www.baidu.com/' policyStorageKey="has_read_privacy"></lyg-popup>
		</view>
	
	</form>
	
</template>

<script>
	import request from "@/api/index.js";
    import lyg_popup from '@/components/lyg-popup/lyg-popup.vue'
	import {
	  mapMutations
	} from 'vuex';
	export default {
		components: {
		   lyg_popup
		},
		data() {
			return {
				isCk:''
			}
		},

		onInit() {
			uni.clearStorageSync();
		},

		onLoad() {
		
			var authorization = uni.getStorageSync('authorization');
			var shop_id = uni.getStorageSync('shop_id');
			if(authorization && shop_id){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},

		methods: {
			formSubmit: function(e) {
				
				var formData = e.detail.value
				var mobile = formData.mobile
				var password = formData.password

				request.http('/auth/oauth/token', 'POST', {
					'grant_type': 'password',
					'username': mobile,
					'password': password
				}, '登录中...').then(res => {
					var token_type = res.data.token_type;
					var access_token = res.data.access_token;
					var authorization = token_type + ' ' + access_token;
					var uid = res.data.user_info.id;		
					
					if (token_type && access_token) {
						uni.navigateTo({
							url: '../chooseShop/chooseShop?authorization=' + authorization+"&uid="+uid
						})
					}
				})
			},
			radioChange(){
				this.isCk = "1";
			},
			popupState(state) {
			  console.log(state);
			}
		}
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	page {
		background-color: #fff;
	}

	.hello {
		font-size: 60rpx;
		font-weight: bold;
		color: #333333;
		line-height: 60rpx;
		margin-top: 278rpx;
	}

	.wel {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		margin-top: 30rpx;
		margin-bottom: 200rpx;
	}

	.inputBox {
		width: 600rpx;
		height: 88rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		border: 2rpx solid #DDDDDD;
		border-radius: 44rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.inputBox .icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}

	.inputBox input {
		width: calc(100% - 70rpx);
	}

	.btn_box5 {
		position: static;
		margin-top: 70rpx;
	}

	.note {
		font-size: 24rpx;
		color: #999999;
		line-height: 24rp;
		margin-top: 40rpx;
	}
	.ysBox {
		margin: auto;
		margin-top: 20rpx;
	}
	.line {
		display: block;
		
	}
	.line .path {
		color: #007aff;
		display: inline-block;
		text-align: center;
	}
</style>
